-
Notifications
You must be signed in to change notification settings - Fork 8
DOC-752 | Graph Visualizer UI #701
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
Deploy Preview Available Via |
Thank you for your pull request and welcome to our community. We could not parse the GitHub identity of the following contributors: bluepal-shiva-darapaneni.
|
…ng the all usecases
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
menuTitle: Graph Visualizer | ||
weight: 85 | ||
description: >- | ||
Graph Visualizer allows you to visualize the graphs present in the database. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Missing article
- Too vague, need a good value proposition here
- Shouldn't end with a period as per the Readme
Graph Visualizer allows you to visualize the graphs present in the database. | ||
--- | ||
|
||
A **Graph** in ArangoDB is a powerful data structure that models relationships between entities. The **Graph Visualizer** provides an interactive interface to explore these connections, enabling users to traverse edges, inspect vertices, and intuitively understand the underlying data structure. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure if we need to explain the concept of a graph in this context
|
||
A **Graph** in ArangoDB is a powerful data structure that models relationships between entities. The **Graph Visualizer** provides an interactive interface to explore these connections, enabling users to traverse edges, inspect vertices, and intuitively understand the underlying data structure. | ||
|
||
> 💡 **Note:** Graph creation is **not** performed within the Graph Visualizer. Graphs must be created in the **Graphs** section of the application. Once a graph is created there, it will automatically appear in the Graph Visualizer, ready for exploration and visualization. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should use an Admonition, see Readme
Right-click anywhere on the canvas and select **"Create Node"**. A dropdown will appear showing all related document collections. Select the desired collection (vertex type), provide a unique identifier or name, and create the node. The node will then appear in the visualization. | ||
|
||
- **Step-1 : Right Click On Graph Area** | ||
{{< image src="../../images/1a-Create_Node.png" >}} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please use standard Markdown if you want to include images. This Shortcode is only for exceptional cases where custom styling needs to be specified or if the image should have a caption.
|
||
> 💡 **Note:** Graph creation is **not** performed within the Graph Visualizer. Graphs must be created in the **Graphs** section of the application. Once a graph is created there, it will automatically appear in the Graph Visualizer, ready for exploration and visualization. | ||
|
||
## 1.Data Augmentation |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would generally avoid enumerations in headlines, and especially here where the content has no specific order (time/priority)
|
||
While the Graph Visualizer is primarily designed for exploring graph data, you can also create and modify nodes and edges directly from the canvas. | ||
|
||
**A.Add New Nodes (Vertices):** |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To structure the content, you should use (un)ordered lists if the child content is rather short or sub-headings if it's larger. Enumerations need to be created with markup not free-text.
While the Graph Visualizer is primarily designed for exploring graph data, you can also create and modify nodes and edges directly from the canvas. | ||
|
||
**A.Add New Nodes (Vertices):** | ||
Right-click anywhere on the canvas and select **"Create Node"**. A dropdown will appear showing all related document collections. Select the desired collection (vertex type), provide a unique identifier or name, and create the node. The node will then appear in the visualization. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- UI element labels should just be bold but not be wrapped in quote marks. Please see the reference page again: https://docs.arangodb.com/stable/components/web-interface/graphs/
- It's a dropdown menu. Maybe the term "context menu" is preferable? You can check the existing documentation, whether there is an established term already.
- Avoid using "will" etc., see https://developers.google.com/style/tense
**A.Add New Nodes (Vertices):** | ||
Right-click anywhere on the canvas and select **"Create Node"**. A dropdown will appear showing all related document collections. Select the desired collection (vertex type), provide a unique identifier or name, and create the node. The node will then appear in the visualization. | ||
|
||
- **Step-1 : Right Click On Graph Area** |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Use markup for ordered list
- Should be right-click (hyphen)
- Is the idea for this to be like a headline? Otherwise, I don't understand the title case
|
||
The top-left section of the Graph Visualizer includes powerful search and query tools for interactive exploration. | ||
|
||
##### 🔍 Search |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Please don't skip headline levels. Pages should have a sound structure.
- I'm not sure about the use of emoji
These features allow better spatial understanding of node clusters, hierarchies, | ||
and relationship flows. | ||
|
||
--- |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why a horizontal ruler here?
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
and visually understand the data structure. | ||
|
||
{{< info >}} | ||
💡 **Note:** Graph creation is **not** performed within the Graph Visualizer. Graphs must be created in the **Graphs** section of the application. Once a graph is created there, it will automatically appear in the Graph Visualizer, ready for exploration and visualization. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Remove the emoji and "Note", how this remark is displayed is better left to the template of the admonition shortcode
- Unclear what "the application" refers to. Should be more specific, pointing to the current Management interface and then the Graphs section using the 2nd level navigation
- Use present tense
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Leave enumerations to the content processor, i.e. no handwritten 1, 2, or 1., 2. or A, B in headlines or lists. Use unordered or ordered Markdown lists instead.
|
||
Right-click anywhere on the canvas to open the context menu and select **Create Node**. A dropdown appears listing available document collections. Select a collection (vertex type), enter a unique identifier, and create the node. It is then added to the visualization. | ||
|
||
##### 1. Open the Graph Interface |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should be an ordered list because each step is a short text, and I think it can be more concise like this:
1. In the web interface, navigate to the **Graphs** section.
2. Click the name or row of the desired graph.
3. Right-click the canvas to open the context menu.
4. Click **Create node** and select the collection to create the vertex in.
5. In the dialog that opens, you can do the following:
- Change the target collection (**Node Type**)
- Optionally enter the document key for the vertex (**Node ID**).
7. Click **Create**. The new node appears on the canvas.
The same goes for creating edges, as well as deleting vertices/edges.
|
||
### C. Delete Nodes or Edges | ||
|
||
Select a node or edge and right-click to access the **"Delete"** option. This action removes the selected element from both the graph and the database. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No quotes as I said before
The core function of the Graph Visualizer is to provide an intuitive canvas for exploring graph structures. | ||
|
||
### A. List All Graphs | ||
View and select any graph from the list of connected graphs, including **General Graphs**, **Smart Graphs**, **Satellite Graphs**, **Enterprise Graphs**, and **Knowledge Graphs**. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Except for General Graphs, there is no space between the words, e.g. SmartGraphs. See the README
### C. Dynamic Graph Rendering | ||
In addition to static graphs, you can dynamically render graphs using the **New Query** or **Saved Queries** options. This allows visualizing results from custom AQL queries on demand. | ||
{{< tip >}} | ||
💡 On CLick search bar (Explore) user can able to run the query and see the result on Canvas.And also user can able to save the query for future use. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Grammar needs to be fixed, emoji removed
|
||
### A. Add New Nodes | ||
|
||
Right-click anywhere on the canvas to open the context menu and select **Create Node**. A dropdown appears listing available document collections. Select a collection (vertex type), enter a unique identifier, and create the node. It is then added to the visualization. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This seems redundant, why essentially the same description twice?
View and select any graph from the list of connected graphs, including **General Graphs**, **Smart Graphs**, **Satellite Graphs**, **Enterprise Graphs**, and **Knowledge Graphs**. | ||
 | ||
|
||
### B. Select and Load a Graph |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
AFAICT, it doesn't necessarily show you the graph by default? For example, if I use the clear canvas option and re-open the graph visualizer, I only see the message that I need to use the Explore button to search for a node. It's important we cover the possible situations the user might find themselves in and describe all the options for selecting what is displayed to get out of nothing being displayed or displaying something specific.
…in as per with highier browser zoom
Thank you for your pull request and welcome to our community. We could not parse the GitHub identity of the following contributors: bluepal-shiva-darapaneni.
|
Thank you for your pull request and welcome to our community. We could not parse the GitHub identity of the following contributors: bluepal-shiva-darapaneni.
|
Thank you for your pull request and welcome to our community. We could not parse the GitHub identity of the following contributors: bluepal-shiva-darapaneni.
|
Description
Upstream PRs